<template>
	<view class="container pt_12 pb_12 pl_16 pr_16">
		<view class="fx aic jcb">
			<view class="fz_16 fb">
				历史搜索
			</view>
			<view class="fx aic" @click="handleClear">
				<text class="width_16 height_16 mr_2"></text>
				<text class="fz_12 fc_666">清空</text>
			</view>
		</view>
		<view class="fx fx_w gridc_12 gridr_8 mt_12">
			<view class="lh_29 pl_12 pr_12 fz_12 bc_fff br_100" v-for="item,index in history" :key="index"
				@click="handleClick(item)">
				{{item}}
			</view>
		</view>
		<view class="mt_38">
			<Empty type="search" size="86" />
		</view>
	</view>
</template>

<script>
	import Empty from '@/components/Empty'
	export default {
		components: {
			Empty
		},
		props: {
			history: {
				type: Array,
				default: () => ([])
			}
		},
		data() {
			return {}
		},
		methods: {
			handleClick(item) {
				if (item) {
					this.$emit('search', item)
				}
			},
			handleClear() {
				uni.showModal({
					title: '提示',
					content: '是否清空历史搜索记录？',
					success: (res) => {
						if(res.confirm) {
							this.$emit('clear')
							this.$storage.clear('searchHistory')
						}
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {}
</style>